<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>选择入住城市</title>
    <link rel="stylesheet" href="../../../css/aui.css" />
    <link rel="stylesheet" href="../../../css/iconfont/iconfont.css">
    <link rel="stylesheet" href="../../../css/index/hotel/sort.css" />
    <link rel="stylesheet" href="../../../css/index/hotel/addr.css">
    <link rel="stylesheet" href="../../../css/my/frequenter/index.css" />
</head>

<body style="cursor: pointer">
    <div class="aui-content content-padded" style="width:100%;background:#f7f7f7;position:fixed;top:0;z-index:999;">
        <div class="search" style="">
            <i class="aui-iconfont aui-icon-search" style="line-height: 2.3rem;"></i>
            <input class="search_city" onchange="change(this)" type="text" placeholder="搜索城市" style="height: 2rem;" value="">
        </div>
    </div>
    <div class="hotCity" style="padding: 3.5rem 0.5rem .5rem;">
        <div class="cityTitle"><span>热门城市</span></div>
        <ul>
            <li onclick="hotCityClick(this)">北京</li>
            <li onclick="hotCityClick(this)">上海</li>
            <li onclick="hotCityClick(this)">深圳</li>
            <li onclick="hotCityClick(this)">广州</li>
            <li onclick="hotCityClick(this)">成都</li>
            <li onclick="hotCityClick(this)">重庆</li>
            <li onclick="hotCityClick(this)">杭州</li>
            <li onclick="hotCityClick(this)">西安</li>
            <li onclick="hotCityClick(this)">武汉</li>
            <li onclick="hotCityClick(this)">青岛</li>
            <li onclick="hotCityClick(this)">郑州</li>
            <li onclick="hotCityClick(this)">天津</li>
            <li onclick="hotCityClick(this)">济南</li>
            <li onclick="hotCityClick(this)">南京</li>
            <li onclick="hotCityClick(this)">厦门</li>
            <li onclick="hotCityClick(this)">长沙</li>
            <li onclick="hotCityClick(this)">太原</li>
        </ul>
    </div>
    <ul id="tab-target" style="margin-top: 0rem;">
        <li class="sort_box" id="lists">
            <!--<div id="letter" ></div>-->
            <!--<div class="initials">-->
            <!--<ul>-->
            <!--&lt;!&ndash;<li><img src="img/068.png"></li>&ndash;&gt;-->
            <!--</ul>-->
            <!--</div>-->
        </li>
        <li></li>
    </ul>

</body>
<script type="text/javascript" src="../../../script/aui/api.js"></script>
<script type="text/javascript" src="../../../script/extend/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../../../script/extend/jquery.charfirst.pinyin.js"></script>
<script type="text/javascript" src="../../../script/extend/sort.js"></script>
<script type="text/javascript" src="../../../script/extend/doT.min.js"></script>
<script type="text/javascript" src="../../../script/config.js"></script>
<script type="text/javascript" src="../../../script/common.js"></script>
<script id="hotel_addr_list" type="text/x-dot-template">
    <div id="letter"></div>
    {{ for(let i=0;i < it.length;i++) {}}
        <li class="sort_list" onclick="hasselected(this)">
          <div class="num_name" city_id="{{=it[i].code}}">{{=it[i].name}}</div>
          <i class="aui-iconfont aui-icon-correct hidden"></i>
        </li>
    {{ } }}
    <div class="initials" style="margin-top:-1.5rem">
        <ul>

        </ul>
    </div>
</script>
<script>
    apiready = function() {
        api.parseTapmode();
        //酒店的城市
        $.getJSON('./hotelCityList.json', function(ret){
          var dataInter = ret.data;
          city_list = dataInter;
          var interText = doT.template($("#hotel_addr_list").text());
          $("#lists").append(interText(dataInter));
          sort();
        });

        //接收监听
        api.addEventListener({
            name: 'hotelAddrEv'
        }, function(ret, err) {
            var cityName = $.trim($(".search_city").val());
            var data = $api.getStorage('hotel_data')
            data = $api.strToJson(data) || {};
            data.city_name = cityName;
            $api.setStorage("hotel_data", $api.jsonToStr(data));
        });
    };

    //热门城市选择
    function hotCityClick(obj) {
        $('.search_city').val($(obj).html());
    }

    //选择城市对号√
    function hasselected(obj) {
        var cityName = $(obj).find('div').text();
        $('.search_city').empty().val(cityName);
        $(obj).siblings().children(".aui-icon-correct").addClass("hidden").removeClass("selected");
        $(obj).find(".aui-icon-correct").removeClass("hidden").addClass("selected");
    }

    //搜索
    function change(obj) {
        get_travelers_list(obj.value);
    }

    //搜索筛选
    function get_travelers_list(search) {
        $('#lists').empty();
        var new_list = [];
        city_list.forEach(function(value, index) {
            if (value.name.indexOf(search) != -1) {
                new_list.push(value);
            }
        });
        var interText = doT.template($("#hotel_addr_list").text());
        $("#lists").append(interText(new_list));
        sort();
    }

</script>

</html>
